<template>
  <div>
      <div>
          <h1>首页</h1>
            {{user["username"]}}
            <!-- {{menus_data}} -->
      </div>
      <div style="width:300px;">
      <ul>
        <li
          v-for="item1 in menus_data"
          :key="item1.id"
        >{{item1.label}}
          <ul>
            <li
              v-for="item2 in item1.children"
              :key='item2.id'
            ><a :href="item2.url">{{item2.label}}</a></li>
          </ul>
        </li>
      </ul>
    </div>
      <!-- <el-row class="tac">
      <el-col :span="12">
        <el-menu class="el-menu-vertical-demo">
          <el-submenu
            v-for="item1 in menus_data"
            :key="item1.id"
            :index="item1.id.toString()"
          >
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>{{item1.label}}</span>
            </template>

            <el-menu-item
              v-for="item2 in item1.children"
              :key="item2.id"
              :index="item1.id+'-'+item2.id"
            >
              <a :href="item2.url">{{item2.label}}</a>
            </el-menu-item>

          </el-submenu>
        </el-menu>
      </el-col>
    </el-row> -->
  </div>
</template>


<script>
export default {
    data() {
        return {
            token:localStorage.token || '',
            uid:localStorage.uid,
            user:{},
            menus_data:[]
        }
    },
    created(){
        this.get_user()
        this.get_menus()

    },
    methods: {
        get_user(){
            this.axios.get('/user/'+this.uid+'/',{
        // 向后端传递JWT token的方法
        headers: {
          'Authorization': 'JWT ' + this.token
        },
        responseType: 'json',
        }).then(resp=>{
            console.log(resp.data)
            this.user = resp.data
            this.get_menus()
        })
        },
        get_menus(){
            var menus = this.user.role.menus
            var menus_data = []
            for (var i in menus) {
                if (menus[i].parent) {
                var the_parent = menus_data.find(item => item.id == menus[i].parent)
                if (the_parent.children) { } else {
                    the_parent.children = []
                }
                the_parent.children.push(menus[i])
                } else {
                menus_data.push(menus[i])
                }
            }
                    this.menus_data=menus_data
                    console.log(this.menus_data)
                }
    },


}
</script>


<style>


</style>